O'zbek

React maxsus hooklaridan foydalanib komponent mantiqini ajratib olish va qayta ishlatishni o'rganing. Bu kodga xizmat ko'rsatish, testlash va dastur arxitekturasini yaxshilaydi.

React Maxsus Hooklari: Qayta foydalanish uchun komponent mantiqini ajratib olish

React hooklari React komponentlarini yozish uslubimizni inqilob qildi, holat va qo'shimcha effektlarni boshqarishning yanada oqlangan va samarali usulini taklif etdi. Mavjud bo'lgan turli hooklar orasida maxsus hooklar komponent mantiqini ajratib olish va qayta ishlatish uchun kuchli vosita sifatida ajralib turadi. Ushbu maqola React maxsus hooklarini tushunish va joriy etish bo'yicha keng qamrovli qo'llanmani taqdim etadi, bu sizga yanada qo'llab-quvvatlanadigan, testlanadigan va kengaytiriladigan ilovalar yaratish imkonini beradi.

React Maxsus Hooklari nima?

Mohiyatan, maxsus hook bu nomi "use" bilan boshlanadigan va boshqa hooklarni chaqira oladigan JavaScript funksiyasidir. U sizga komponent mantiqini qayta ishlatiladigan funksiyalarga ajratib olish imkonini beradi, shu bilan kod takrorlanishini bartaraf etadi va toza komponent tuzilishini rag'batlantiradi. Oddiy React komponentlaridan farqli o'laroq, maxsus hooklar hech qanday UI (foydalanuvchi interfeysi)ni render qilmaydi; ular shunchaki mantiqni o'z ichiga oladi.

Ularni React holati va hayotiy sikl xususiyatlariga kira oladigan qayta ishlatiladigan funksiyalar deb o'ylang. Ular turli komponentlar o'rtasida holatli mantiqni almashishning ajoyib usuli bo'lib, ko'pincha o'qilishi va saqlanishi qiyin bo'lgan kodga olib keladigan yuqori tartibli komponentlar (higher-order components) yoki render props'larga murojaat qilmasdan buni amalga oshirishga imkon beradi.

Nima uchun Maxsus Hooklardan foydalanish kerak?

Maxsus hooklardan foydalanishning afzalliklari juda ko'p:

Birinchi Maxsus Hookingizni yaratish

Keling, maxsus hook yaratish va undan foydalanishni amaliy misol bilan ko'rib chiqamiz: API'dan ma'lumotlarni olish.

Misol: useFetch - Ma'lumotlarni olish uchun Hook

Tasavvur qiling, siz React ilovangizda tez-tez turli API'lardan ma'lumotlarni olishingiz kerak. Har bir komponentda ma'lumot olish mantiqini takrorlash o'rniga, siz useFetch hookini yaratishingiz mumkin.


import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;

    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url, { signal: signal });
        if (!response.ok) {
          throw new Error(`HTTP xatosi! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setError(null); // Avvalgi xatoliklarni tozalash
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('So\'rov bekor qilindi');
        } else {
          setError(error);
        }
        setData(null); // Avvalgi ma'lumotlarni tozalash
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      abortController.abort(); // Komponent o'chirilganda yoki URL o'zgarganda so'rovni bekor qilish uchun tozalash funksiyasi
    };
  }, [url]); // URL o'zgarganda effektni qayta ishga tushirish

  return { data, loading, error };
}

export default useFetch;

Tushuntirish:

Komponentda useFetch Hookidan foydalanish

Endi, bu maxsus hookni React komponentida qanday ishlatishni ko'rib chiqaylik:


import React from 'react';
import useFetch from './useFetch';

function UserList() {
  const { data: users, loading, error } = useFetch('https://jsonplaceholder.typicode.com/users');

  if (loading) return <p>Foydalanuvchilar yuklanmoqda...</p>;
  if (error) return <p>Xatolik: {error.message}</p>;
  if (!users) return <p>Foydalanuvchilar topilmadi.</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name} ({user.email})</li>
      ))}
    </ul>
  );
}

export default UserList;

Tushuntirish:

Ilg'or Maxsus Hook Naqshlari

Oddiy ma'lumotlarni olishdan tashqari, maxsus hooklar murakkabroq mantiqni o'z ichiga olish uchun ishlatilishi mumkin. Mana bir nechta ilg'or naqshlar:

1. useReducer yordamida holatni boshqarish

Murakkabroq holatni boshqarish stsenariylari uchun siz maxsus hooklarni useReducer bilan birlashtirishingiz mumkin. Bu sizga holat o'tishlarini yanada bashorat qilinadigan va tartibli tarzda boshqarish imkonini beradi.


import { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function useCounter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement' });

  return { count: state.count, increment, decrement };
}

export default useCounter;

Foydalanish:


import React from 'react';
import useCounter from './useCounter';

function Counter() {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <p>Hisob: {count}</p>
      <button onClick={increment}>Oshirish</button>
      <button onClick={decrement}>Kamaytirish</button>
    </div>
  );
}

export default Counter;

2. useContext bilan Kontekst Integratsiyasi

Maxsus hooklar React Kontekstiga kirishni soddalashtirish uchun ham ishlatilishi mumkin. Komponentlaringizda useContext'ni to'g'ridan-to'g'ri ishlatish o'rniga, kontekstga kirish mantiqini o'z ichiga olgan maxsus hook yaratishingiz mumkin.


import { useContext } from 'react';
import { ThemeContext } from './ThemeContext'; // Sizda ThemeContext bor deb taxmin qilinadi

function useTheme() {
  return useContext(ThemeContext);
}

export default useTheme;

Foydalanish:


import React from 'react';
import useTheme from './useTheme';

function MyComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div style={{ backgroundColor: theme.background, color: theme.color }}>
      <p>Bu mening komponentim.</p>
      <button onClick={toggleTheme}>Mavzuni o'zgartirish</button>
    </div>
  );
}

export default MyComponent;

3. Debouncing va Throttling

Debouncing va throttling - bu funksiyaning bajarilish tezligini nazorat qilish uchun ishlatiladigan usullar. Maxsus hooklar ushbu mantiqni o'z ichiga olish uchun ishlatilishi mumkin, bu esa ushbu usullarni hodisalarni qayta ishlovchilarga qo'llashni osonlashtiradi.


import { useState, useEffect, useRef } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

Foydalanish:


import React, { useState } from 'react';
import useDebounce from './useDebounce';

function SearchInput() {
  const [searchValue, setSearchValue] = useState('');
  const debouncedSearchValue = useDebounce(searchValue, 500); // 500ms davomida kechiktirish (debounce)

  useEffect(() => {
    // debouncedSearchValue yordamida qidiruvni amalga oshirish
    console.log('Qidirilmoqda:', debouncedSearchValue);
    // console.log'ni o'zingizning haqiqiy qidiruv mantiqingiz bilan almashtiring
  }, [debouncedSearchValue]);

  const handleChange = (event) => {
    setSearchValue(event.target.value);
  };

  return (
    <input
      type="text"
      value={searchValue}
      onChange={handleChange}
      placeholder="Qidirish..."
    />
  );
}

export default SearchInput;

Maxsus Hooklarni Yozish uchun Eng Yaxshi Amaliyotlar

Maxsus hooklaringiz samarali va qo'llab-quvvatlanadigan bo'lishini ta'minlash uchun ushbu eng yaxshi amaliyotlarga rioya qiling:

Global Mulohazalar

Global auditoriya uchun ilovalar ishlab chiqayotganda, quyidagilarni yodda tuting:

Misol: Maxsus Hook bilan Xalqarolashtirilgan Sana Formatlash


import { useState, useEffect } from 'react';
import { DateTimeFormat } from 'intl';

function useFormattedDate(date, locale) {
  const [formattedDate, setFormattedDate] = useState('');

  useEffect(() => {
    try {
      const formatter = new DateTimeFormat(locale, {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      });
      setFormattedDate(formatter.format(date));
    } catch (error) {
      console.error('Sanani formatlashda xatolik:', error);
      setFormattedDate('Yaroqsiz sana');
    }
  }, [date, locale]);

  return formattedDate;
}

export default useFormattedDate;

Foydalanish:


import React from 'react';
import useFormattedDate from './useFormattedDate';

function MyComponent() {
  const today = new Date();
  const enDate = useFormattedDate(today, 'en-US');
  const frDate = useFormattedDate(today, 'fr-FR');
  const deDate = useFormattedDate(today, 'de-DE');

  return (
    <div>
      <p>AQSH Sanasi: {enDate}</p>
      <p>Fransuz Sanasi: {frDate}</p>
      <p>Nemis Sanasi: {deDate}</p>
    </div>
  );
}

export default MyComponent;

Xulosa

React maxsus hooklari komponent mantiqini ajratib olish va qayta ishlatish uchun kuchli mexanizmdir. Maxsus hooklardan foydalanib, siz toza, yanada qo'llab-quvvatlanadigan va testlanadigan kod yozishingiz mumkin. React bilan mahoratingiz oshgani sayin, maxsus hooklarni o'zlashtirish murakkab va kengaytiriladigan ilovalar yaratish qobiliyatingizni sezilarli darajada yaxshilaydi. Maxsus hooklarni ishlab chiqishda ularning samarali va turli auditoriya uchun qulay bo'lishini ta'minlash uchun eng yaxshi amaliyotlarga rioya qilishni va global omillarni hisobga olishni unutmang. Maxsus hooklar kuchini qabul qiling va React dasturlash mahoratingizni yangi bosqichga ko'taring!